<template>
  <div class="custom-tab-page">
    <div class="tab5-title">
      <div class="left">总额：¥{{ allMoney }}</div>
      <el-button v-if="showItem" class="right" type="primary" @click="addFun" size="small">
        + 添加
      </el-button>
    </div>
    <el-table :data="tableData" :height="store.tableHeight - 180" border style="width: 100%; margin-top: 15px">
      <el-table-column prop="id" label="序号" width="55" />
      <el-table-column prop="code" label="回款计划编号" />
      <el-table-column prop="order_no" label="订单号" />
      <el-table-column prop="num" label="计划期次" />
      <el-table-column prop="plan_money" label="计划金额" />
      <el-table-column prop="order_name" label="合同名称" />
      <el-table-column prop="amount_real" label="合同金额" />
      <el-table-column prop="plan_date" label="计划时间" />
      <el-table-column width="120" label="操作" align="center" v-if="showItem">
        <template #default="{ row }">
          <el-button type="primary" link @click="updateFun(row)">
            编辑
          </el-button>
          <el-button type="danger" link @click="delFun(row.id)">
            删除
          </el-button>
          <!-- <el-button type="primary" link @click="detailFun(row)">
            回款
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px; display: flex; justify-content: center">
      <el-pagination :small="true" v-model:currentPage="currentPage" v-model:page-size="pageSize"
        :page-sizes="[20, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
  <addPage ref="addPageRef" :dataInfo="dataInfo" @refreshList="refreshList" />
  <updatePage ref="updatePageRef" :dataInfo="dataInfo" @refreshList="refreshList" />
</template>
<script setup>
import addPage from "./Tab6-dialog.vue";
import updatePage from "./Tab6-dialog-update.vue";
import { useCounterStore } from "@/stores/counter.js";
import {
  receivablesPlanIndexApi,
  receivablesPlanDeleteApi,
  receivablesPlanReadApi,
} from "@/plugins/api/customer/manage/tab6";

const store = useCounterStore();
const props = defineProps({
  dataInfo: {
    type: Object,
    default: {},
  },
  showItem: {
    type: Boolean,
    default: false,
  },
});

// 分页
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const handleSizeChange = (val) => {
  pageSize.value = val;
  getData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getData();
};
let tableData = ref([]);
let allMoney = ref(0);
function getData() {
  receivablesPlanIndexApi({
    page: currentPage.value,
    pageSize: pageSize.value,
    customer_id: props.dataInfo.id,
  }).then((res) => {
    allMoney.value = res.totalAmount;
    tableData.value = res.list;
    total.value = res.page.total;
  });
}
let addPageRef = ref(null);
function addFun() {
  addPageRef.value.initFun();
}
function initFun() {
  console.log(1112);
  tableData.value = [];
  getData();
}
function refreshList() {
  getData();
}
//
let updatePageRef = ref(null);
function updateFun(row) {
  updatePageRef.value.initFun(row);
}
// 删除
function delFun(id) {
  ElMessageBox.confirm("确认删除，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      receivablesPlanDeleteApi({
        id: id,
      }).then(() => {
        ElMessage({
          type: "success",
          message: "删除成功！",
        });
        getData();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消。",
      });
    });
}
//
function detailFun(row) {
  receivablesPlanReadApi({
    id: row.id,
  });
}
//
defineExpose({
  initFun,
});
onMounted(() => { });
</script>

<style lang="scss" scoped>
.custom-tab-page {
  width: 100%;
  height: 100%;

  .tab5-title {
    display: flex;
    height: 46px;
    background: #fafbfc;
    box-sizing: border-box;
    padding-left: 10px;
    justify-content: space-between;

    .left {
      align-self: center;
      display: flex;
    }

    .right {
      align-self: center;
      margin-right: 10px;
    }
  }
}
</style>
